缓存 Rive 文件

在大多数情况下，.riv 文件应该能快速加载，您不需要自己管理 RiveFile。但如果您打算在应用的多个部分中使用同一个 .riv 文件，甚至在同一个屏幕上使用，那么加载文件一次并将其保留在内存中可能是有利的。

示例用法

新版运行时（推荐）

在新版 React Native 运行时中，您始终需要加载和管理传递给 RiveView 的 RiveFile 对象的生命周期。useRiveFile hook 处理加载，您可以跨多个 RiveView 组件复用同一个 RiveFile 以将其缓存在内存中。

以下示例展示了如何缓存 Rive 文件并在多个组件中复用它：

import { useState } from 'react';
import { View, ActivityIndicator, Text } from 'react-native';
import {
    RiveView,
    useRiveFile,
    Fit,
    type RiveFile,
} from '@rive-app/react-native';

// 自定义组件用于显示 Rive 动画
const RiveExample = ({ riveFile }: { riveFile: RiveFile }) => {
    return (
    <RiveView
        file={riveFile}
        fit={Fit.Contain}
        autoPlay={true}
        style={{ width: 200, height: 200 }}
    />
    );
};

export default function CacheExample() {
    // 使用 useRiveFile 加载 Rive 文件一次
    const { riveFile, isLoading, error } = useRiveFile(
    require('../../assets/rive/rating.riv')
    );

    const [instanceCount] = useState(5); // 要渲染的 RiveExample 组件数量

    if (isLoading) {
    return <ActivityIndicator size="large" />;
    }

    if (error || !riveFile) {
    return <Text>Failed to load Rive file: {error || 'Unknown error'}</Text>;
    }

    // 每个 RiveExample 组件使用我们之前加载的同一个 RiveFile，
    // 因此只获取和初始化一次
    return (
    <View style={{ flex: 1, flexDirection: 'row', flexWrap: 'wrap' }}>
        {Array.from({ length: instanceCount }, (_, index) => (
        <RiveExample key={`rive-instance-${index}`} riveFile={riveFile} />
        ))}
    </View>
    );
}

为优化内存使用，如果多个 RiveView 实例使用相同的 .riv 文件，请复用同一个 RiveFile 对象。这确保文件只加载一次并在内存中共享。

管理状态

如何保持 RiveFile 存活并与组件共享取决于您的状态管理方法：

• 全局访问：在应用级别或上下文提供者中加载文件，并使用 React Context 或 Redux、Zustand 等状态管理库暴露它。
• 组件级别：如果文件只在应用的特定部分需要，在父组件中加载并将其作为 props 向下传递。
• 自定义 hook：创建一个自定义 hook，管理 RiveFile 生命周期并将其提供给消费组件。

内存管理

useRiveFile hook 自动管理 RiveFile 对象的生命周期。当组件卸载或输入更改时，该 hook 将释放先前的文件并在需要时加载新文件。这为您提供了自动内存管理，无需手动清理。

网络资源

要从远程 URL 加载 Rive 文件，将 URL 字符串传递给 useRiveFile：

const { riveFile, isLoading, error } = useRiveFile(
    'https://cdn.rive.app/animations/vehicles.riv'
);

对于网络资源，在内存中缓存文件可以避免重复下载和不必要的解码。只要您复用同一个 riveFile 对象，useRiveFile hook 就会自动处理。

参见加载 Rive 文件了解更多加载方法。

旧版运行时

不支持